import React from 'react'
import {Menu, Drawer, Collapse, Table, Input, Button, Modal} from 'antd';
import './SetMenu.css'
import {Link} from "react-router-dom";
import API from '../../api/api'

export default class SetMenu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible:false,
            subVisible:false,
            current: 1,
            openKeys: [],
            sider: [],
            drawerVisible:false
        }
    }

    menu = (
        <Menu>
            <Menu.Item key="3">
                <a onClick={this.props.logout}>退出登录</a>
            </Menu.Item>
        </Menu>
    );

    columns = [
        {
            title: '名稱',
            dataIndex: 'NAME',
            key: 'NAME',
            ellipsis:true,
            width:110,
            render:(text,record)=>{
                if(record.TYPE=="file-d"){
                    return <Link to={`/eip/table/file&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
                }else if(record.TYPE=="article-d"){
                    return <Link to={`/eip/table/article&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
                }else if(record.TYPE=="article"){
                    return <Link to={`/eip/file/article/${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
                }else if(record.TYPE=="folder"){
                    return <Link to={`/eip/table/folder&${record.SUBSCRIBE_TARGET_ID}`}>{text}</Link>
                }
            }
        },
        {
            title: '類型',
            dataIndex: 'TYPE',
            key: 'TYPE',
            ellipsis:true,
            width:40,
            render:(text, record)=>{
                return text=="file-d"?"文件庫":text=="article-d"?"文章庫":text=="article"?"文章":text=="folder"?"文件夾":null
            }
        },
        {
            title: '訂閱時間',
            dataIndex: 'UPDATE_DATE',
            key: 'UPDATE_DATE',
            ellipsis:true,
            width:90
        },
    ]

    dataSource ;

    render() {
        return (
            <span id="person_setting" style={{float:"right",fontWeight:"bold"}}>
                <img style={{width:"5rem",borderRadius:"50%",}} src={require("../../imgs/msik_logo2.png")}/>
                &nbsp;&nbsp;
                <img style={{width:"2rem",borderRadius:"50%",}} src={require("../../imgs/ODTLcjxAfvqbxHnVXCYX.png")}/>
                &nbsp;&nbsp;
                <span style={{color:"#1890ff"}} >{localStorage.getItem("userName")}</span>
                &nbsp;&nbsp;
                <a style={{color:"#1890ff"}} onClick={_=>{this.dataSource = API.userSubList();this.setState({drawerVisible:true,subVisible:true});this.title="個人訂閱"}}>個人訂閱</a>
                &nbsp;&nbsp;
                <Drawer
                    width={500}
                    title={this.title}
                    placement="right"
                    onClose={_=>{this.setState({drawerVisible:false,subVisible:false})}}
                    visible={this.state.drawerVisible}
                >
                    {
                        this.state.subVisible==true?
                            <Table id="subscribeTable" dataSource={this.dataSource} columns={this.columns}/>
                            :
                            null
                    }
                </Drawer>
                <a onClick={_=>{API.loginOut();this.props.logout()}}>退出</a>
            </span>

        );
    }
}
